<template>
	<view class='productSort'>
		<view class='header acea-row row-center-wrapper'>
			<view class='acea-row row-between-wrapper input'>
				<text class='iconfont icon-sousuo'></text>
				<input type='text' placeholder='点击搜索商品信息' @confirm="searchSubmitValue" confirm-type='search'
					name="search" placeholder-class='placeholder'></input>
			</view>
		</view>
		<view class='aside' :style="{bottom: tabbarH + 'px',height: height + 'rpx'}">
			<scroll-view scroll-y="true" scroll-with-animation='true' style="height: 100%;">
				<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""'
					v-for="(item,index) in productList" :key="index" @click='tap(index,"b"+index)'>
					<text >{{item.name}}</text></view>
			</scroll-view>

		</view>
		
		
		
	<!--	<view class='conter'>
			<scroll-view scroll-y="true" :scroll-into-view="toView" :style='"height:"+height+"rpx;margin-top: 96rpx;"'
				@scroll="scroll" scroll-with-animation='true'>
				<block v-for="(item,index) in productList" :key="index" >

					<view class='listw' :id="'b'+index">
						<view class='title acea-row row-center-wrapper'>
							<view class='line'></view>
							<view class='name'>{{item.name}}</view>
							<view class='line'></view>
						</view>
						
						
						
						
						<view class='list acea-row' >
							
							<block v-for="(itemn,indexn) in list[index].list" :key="indexn" >
								<view class="productBox">
								<navigator hover-class='none'
									:url='"/pages/goods_details/index?id="+itemn.id'
									class='item acea-row row-column row-middle'>
									<view class='picture' :style="{'background-color':itemn.image?'none':'#f7f7f7'}">
										<image :src='itemn.image'></image>
									</view>
									<view class='name line1'>{{itemn.storeName}}</view>
									<view class="price">
										￥<text class='num'>{{itemn.price}}</text>
									</view>
								</navigator>
								</view>
							</block>
							
						</view>
						
						
						
						
					</view>
				</block>
				<view :style='"height:"+(height-300)+"rpx;"' v-if="number<15"></view>
			</scroll-view>
		</view>-->
		<view class='conter'>
			<scroll-view scroll-y="true" :scroll-into-view="toView" :style='"height:"+height+"rpx;margin-top: 96rpx;"'
				@scroll="scroll" scroll-with-animation='true'>
				<block  v-for="(item,index) in productList" :key="index">
		
					<view class='listw' v-if="index==productIndex" :id="'b'+index">
						<view class='title acea-row row-center-wrapper'>
							<view class='line'></view>
							<view class='name'>{{item.name}}</view>
							<view class='line'></view>
						</view>
						
						
						
						
						<view class='list acea-row' >
							
							<block v-for="(itemn,indexn) in list[index].list" :key="indexn" >
								<view class="productBox">
								<navigator hover-class='none'
									:url='"/pages/goods_details/index?id="+itemn.id'
									class='item acea-row row-column row-middle'>
									<view class='picture' :style="{'background-color':itemn.image?'none':'#f7f7f7'}">
										<image :src='itemn.image'></image>
									</view>
									<view class='name line1'>{{itemn.storeName}}</view>
									<view class="price">
										￥<text class='num'>{{itemn.price}}</text>
									</view>
								</navigator>
								</view>
							</block>
							
						</view>
						
						
						
						
					</view>
				</block>
				<view :style='"height:"+(height-300)+"rpx;"' v-if="number<15"></view>
			</scroll-view>
		</view>
		
		
		
	</view>
</template>

<script>
	import {
		getCategoryList,
		getProductslist,
	} from '@/api/store.js';
	import ClipboardJS from "@/plugin/clipboard/clipboard.js";
	export default {
		data() {
			return {
				list:[],
				productIndex:0,
				
				where: {
					keyword: '',
					priceOrder: '',
					salesOrder: '',
					news: 0,
					page: 1,
					limit: 20,
					cid: 0,
				},
				navlist: [],
				productList: [],
				navActive: 0,
				number: "",
				height: 0,
				hightArr: [],
				toView: "",
				tabbarH: 0
			}
		},
		onLoad(options) {
			this.getAllCategory();
			
			
		},
		onShow() {
			
		},
		methods: {
			infoScroll: function() {
				let that = this;
				let len = that.productList.length;
				let child = that.productList[len - 1] && that.productList[len - 1].child ? that.productList[len - 1]
					.child : [];
				this.number = child ? child.length : 0;
					
				//设置商品列表高度
				uni.getSystemInfo({
					success: function(res) {
						that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
					},
				});
				let height = 0;
				let hightArr = [];
				for (let i = 0; i < len; i++) {
					//获取元素所在位置
					let query = uni.createSelectorQuery().in(this);
					let idView = "#b" + i + 1;
					query.select(idView).boundingClientRect();
					query.exec(function(res) {
						let top = res[0].top;
						hightArr.push(top);
						that.hightArr = hightArr
					});
				};
			},
			tap: function(index, id) {
				this.toView = id;
				this.navActive = index;
				this.productIndex=index
			},
			
			get:function(id,len){
				this.where.cid=id
				
				let that = this;
				/*that.setWhere();*/
				/*if (that.loadend) return;
				if (that.loading) return;*/
				/*if (isPage === true) that.$set(that, 'productList', []);*/
				that.loading = true;
				that.loadTitle = '';
				getProductslist(that.where).then(res => {
					this.list[len]=res.data
					this.list[len].cid=id
					/*return this.list*/
					})
			},
			
			getAllCategory: function() {
				let that = this;
				getCategoryList().then(res => {
					that.productList = res.data;
					for(let i=0;i<that.productList.length;i++){
						that.get(that.productList[i].id,i)
					}
					setTimeout(function() {
						that.infoScroll();
					}, 500)
				})
				
				
			},
			scroll: function(e) {
				let scrollTop = e.detail.scrollTop;
				let scrollArr = this.hightArr;
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
						this.navActive = 0
					} else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[
						0]) {
						this.navActive = i
					} else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
						this.navActive = scrollArr.length - 1
					}
				}
			},
			searchSubmitValue: function(e) {
				if (this.$util.trim(e.detail.value).length > 0)
					uni.navigateTo({
						url: '/pages/goods_list/index?searchValue=' + e.detail.value
					})
				else
					return this.$util.Tips({
						title: '请填写要搜索的产品信息'
					});
			},
		
			/*设置where条件*/
			/*setWhere: function() {
				if (this.price == 0) this.where.priceOrder = '';
				else if (this.price == 1) this.where.priceOrder = 'asc';
				else if (this.price == 2) this.where.priceOrder = 'desc';
				if (this.stock == 0) this.where.salesOrder = '';
				else if (this.stock == 1) this.where.salesOrder = 'asc';
				else if (this.stock == 2) this.where.salesOrder = 'desc';
				this.where.news = this.nows ? 1 : 0;
			},*/
			
			/*查找产品*/
			/*get_product_List:function(cid){
				that.where.cid=cid
				getProductslist(that.where).then(res => {
					let list = res.data.list;
					let productList = that.$util.SplitArray(list, that.productList);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? '已全部加载' : '加载更多';
					that.$set(that, 'productList', productList);
					that.$set(that.where, 'page', that.where.page + 1);
					if (that.productList.length === 0) {
						this.get_host_product();
					} 
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
				});
				console.log(this.productList)
			}*/
		}
	}
</script>

<style scoped lang="scss">
	.productSort .header {
		margin-top: 5px;
		height: 78rpx;
		background-color: #fff;
		
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.productSort .header .input {
		width: 700rpx;
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0 25rpx;
	}

	.productSort .header .input .iconfont {
		font-size: 26rpx;
		color: #555;
	}

	.productSort .header .input .placeholder {
		color: #999;
	}

	.productSort .header .input input {
		font-size: 26rpx;
		height: 100%;
		width: 597rpx;
	}

	.productSort .aside {
		position: fixed;
		width: 180rpx;
		left: 0;
		top: 0;
		background-color: #f7f7f7;
		overflow-y: scroll;
		overflow-x: hidden;

		height: auto;
		margin-top: 96rpx;
	}

	.productSort .aside .item {
		height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
	}

	.productSort .aside .item.on {
		background-color: #fff;
		border-left: 4rpx solid #fc4141;
		width: 100%;
		text-align: center;
		color: #fc4141;
		font-weight: bold;
	}

	.productSort .conter {
		margin: 96rpx 0 0 180rpx;
		padding: 0 14rpx;
		background-color: #fff;
		/*background-color: #555;*/
		background-color: #f5f5f5;	
	}

	.productSort .conter .listw {
		padding-top: 20rpx;
	}

	.productSort .conter .listw .title {
		height: 90rpx;
	}

	.productSort .conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}

	.productSort .conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}

	.productSort .conter .list {
		flex-wrap: wrap;
		/*background-color: #999;*/
			
	
	}
	.productSort .conter .list .productBox{
		//width: 109px;
		height: 370rpx;
		border-radius: 12rpx;
		margin-left: 30rpx;
		margin-top: 10px;
		/*margin-bottom:20rpx;*/
		margin-right: 10rpx;
		//background-color: #fff;
		
	}
	
	.productSort .conter .list .item {
		width: 218rpx;
		
		//width: 100%;
		/*margin-top: 26rpx;*/
		/*position: absolute;
		align-items: center;
		justify-content: center;*/
		background-color: #fff;
		border-radius: 12rpx;
	}

	.productSort .conter .list .productBox .item .picture {
		width:100%;
		height: 270rpx;
		margin-right: 23rpx;
		border-radius: 12rpx;
	}

	.productSort .conter .list .item .picture image {
		
		width: 100%;
		height: 100%;
		
		border-radius: 12rpx 12rpx 0 0;
		div {
			background-color: #f7f7f7;
		}
	}
	
	.productSort .conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		height: 46rpx;
		line-height: 56rpx;
		width: 200rpx;
		margin-right: 40rpx;
		text-align: left;
		
	}
	 .price{
		 width: 220rpx;
		 height: 46rpx;
		 
		color: #fc4141;
	}
</style>